---
title: Установка и настройка Astro
sidebar:
  label: Установка
description: 'Как установить Astro и начать новый проект.'
i18nReady: true
banner:
  content: |
    Astro v5 уже здесь! <a href="/ru/guides/upgrade-to/v5/">Узнайте, как обновить ваш сайт</a>
---
import { Tabs, TabItem, FileTree, CardGrid, LinkCard, Steps } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import ReadMore from '~/components/ReadMore.astro';

Команда [`create astro`](#установка-с-помощью-интерфейса-командной-строки) — это самый быстрый способ начать новый проект Astro с нуля. Вы пройдете через все этапы настройки вашего нового проекта Astro и сможете выбрать один из нескольких официальных шаблонов.

Или вы можете начать свой проект, [используя любую существующую тему или стартовый шаблон](#использование-темы-или-стартового-шаблона).

Чтобы установить Astro вручную, обратитесь к нашему [пошаговому руководству по установке вручную](#ручная-установка).

:::tip[Онлайн-превью]
Хотите попробовать Astro в своем браузере? Посетите [astro.new](https://astro.new/), чтобы просмотреть наши стартовые шаблоны и запустить новый проект Astro, не выходя из браузера.
:::

## Требования

- **Node.js** - `v18.17.1`, `v20.3.0`, `v22.0.0`, или выше. ( `v19` и `v21` не поддерживаются.)
- **Текстовый редактор** - Мы рекомендуем [VS Code](https://code.visualstudio.com/) с нашим [официальным расширением Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode).
- **Терминал** - Доступ к Astro осуществляется через интерфейс командной строки (CLI).

## Совместимость с браузерами

Astro создан на основе Vite, который по умолчанию нацелен на браузеры с современной поддержкой JavaScript. Для получения полной информации вы можете посмотреть [список поддерживаемых версий браузеров в Vite](https://vite.dev/guide/build.html#browser-compatibility).

## Установка с помощью интерфейса командной строки

Вы можете запустить `create astro` в любом месте на вашем компьютере, поэтому нет необходимости создавать новый пустой каталог для вашего проекта перед началом работы. Если у вас ещё нет пустого каталога для нового проекта, мастер поможет создать его автоматически.

<Steps>
1. Выполните следующую команду в терминале, чтобы запустить наш удобный мастер установки:

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      # создать новый проект с помощью npm
      npm create astro@latest
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      # создать новый проект с помощью pnpm
      pnpm create astro@latest
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      # создать новый проект с помощью yarn
      yarn create astro
      ```
      </Fragment>
    </PackageManagerTabs>

    Если всё прошло успешно, вы увидите сообщение об успехе, за которым последуют рекомендации по дальнейшим действиям.

2. Теперь, когда ваш проект создан, вы можете выполнить команду `cd` в новом каталоге проекта, чтобы начать использовать Astro.

3. Если вы пропустили шаг "Install dependencies?" во время работы мастера установки, то обязательно установите свои зависимости, прежде чем продолжить.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm install
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn install
      ```
      </Fragment>
    </PackageManagerTabs>

4. Теперь можно [запустить сервер разработки Astro](/ru/develop-and-build/#запуск-сервера-разработки-astro) и увидеть живое превью вашего проекта во время сборки!
</Steps>

## Флаги установки через CLI

Вы можете запустить команду `create astro` с дополнительными флагами, чтобы настроить процесс установки (например, автоматически отвечать «да» на все вопросы, пропускать анимацию Houston) или параметры нового проекта (например, устанавливать git или нет, добавлять интеграции).

<ReadMore>Смотрите [все доступные флаги команды `create astro`](https://github.com/withastro/astro/blob/main/packages/create-astro/README.md)</ReadMore>

### Добавление интеграций

Вы можете создать новый Astro-проект и сразу установить любые [официальные интеграции](/ru/guides/integrations-guide/) или интеграции от сообщества, которые поддерживают команду `astro add`, передав аргумент `--add` в команду `create astro`.

Запустите следующую команду в терминале, заменив названия интеграций на те, которые поддерживают команду `astro add`:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # создать новый проект с React и Partytown
  npm create astro@latest -- --add react --add partytown
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # создать новый проект с React и Partytown
  pnpm create astro@latest --add react --add partytown
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # создать новый проект с React и Partytown
  yarn create astro --add react --add partytown
  ```
  </Fragment>
</PackageManagerTabs>

### Использование темы или стартового шаблона

Вы также можете начать новый проект Astro на основе [официального примера](https://github.com/withastro/astro/tree/main/examples) или ветки `main` любого репозитория GitHub, передав аргумент `--template` команде `create astro`.

Выполните следующую команду в терминале, подставив официальное название стартового шаблона Astro или имя пользователя и репозиторий GitHub темы, которую вы хотите использовать:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # создать новый проект с официальным примером
  npm create astro@latest -- --template <example-name>

  # создать новый проект на основе главной ветки репозитория GitHub
  npm create astro@latest -- --template <github-username>/<github-repo>
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # создать новый проект с официальным примером
  pnpm create astro@latest --template <example-name>
  
  # создать новый проект на основе главной ветки репозитория GitHub
  pnpm create astro@latest --template <github-username>/<github-repo>
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # создать новый проект с официальным примером
  yarn create astro --template <example-name>
  
  # создать новый проект на основе главной ветки репозитория GitHub
  yarn create astro --template <github-username>/<github-repo>
  ```
  </Fragment>
</PackageManagerTabs>

По умолчанию эта команда будет использовать ветку `main` хранилища шаблонов. Чтобы использовать другое имя ветки, передайте его в качестве части аргумента `--template`: `<github-username>/<github-repo>#<branch>`.

## Ручная установка

В этом руководстве вы узнаете, как вручную установить и настроить новый проект Astro.

Если вы не хотите использовать наш автоматический CLI-инструмент `create astro`, вы можете создать проект самостоятельно, следуя руководству ниже.

<Steps>
1. Создайте директорию

    Создайте пустой каталог с именем вашего проекта, а затем перейдите в него.

    ```bash
    mkdir my-astro-project
    cd my-astro-project
    ```

    Как только вы окажетесь в новой директории, создайте файл проекта `package.json`. Так вы будете управлять зависимостями проекта, включая Astro. Если вы не знакомы с этим форматом, выполните следующую команду, чтобы создать такой файл.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm init --yes
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm init 
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn init --yes
      ```
      </Fragment>
    </PackageManagerTabs>

2. Установите Astro

    Сначала установите зависимости Astro в свой проект.

    :::note[Важно]
    Astro должен быть установлен локально, а не глобально. Убедитесь, что вы *не* запускаете `npm install -g astro`, `pnpm add -g astro` или `yarn add global astro`.
    :::

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install astro
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add astro
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add astro
      ```
      </Fragment>
    </PackageManagerTabs>

    Затем замените всю секцию «scripts» в `package.json` следующими данными:

    ```json title="package.json" del={3} ins={4-6}
    {
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "astro dev",
        "build": "astro build",
        "preview": "astro preview"
      },
    }
    ```

    Вы будете использовать эти скрипты далее в руководстве для запуска Astro и выполнения различных команд.

3. Создайте свою первую страницу

    В текстовом редакторе создайте новый файл в вашей директории по адресу `src/pages/index.astro`. Это будет ваша первая страница в проекте.

    Скопируйте и вставьте следующий фрагмент кода (включая символы `---`) в ваш новый файл:

    ```astro title="src/pages/index.astro"
    ---
    // Добро пожаловать в Astro! Всё, что находится между символами «---» — это
    // «метаданные компонента». Они никогда не отображаются в браузере.
    console.log('Это запускается в терминале, а не в браузере!');
    ---
    <!-- Ниже приведён «шаблон компонента». Это просто HTML, но с
        небольшой магией, чтобы помочь вам создавать великолепные шаблоны. -->
    <html>
      <body>
        <h1>Привет, мир!</h1>
      </body>
    </html>
    <style>
      h1 {
        color: orange;
      }
    </style>
    ```

4. Создайте свой первый статический ресурс

    Вам также потребуется создать директорию `public/` для хранения статических ресурсов. Astro всегда будет включать эти ресурсы в вашу финальную сборку, поэтому вы можете смело ссылаться на них внутри шаблонов компонентов.

    В текстовом редакторе создайте новый файл в вашей директории по адресу `public/robots.txt`. `robots.txt` — это простой файл, который большинство сайтов включают в себя, чтобы указать поисковым ботам, таким как Google, как обращаться с вашим сайтом.

    Скопируйте и вставьте следующий фрагмент кода в новый файл:

    ```diff title="public/robots.txt"
    # Пример: Разрешить всем ботам сканировать и индексировать ваш сайт.
    # Полный синтаксис: https://developers.google.com/search/docs/advanced/robots/create-robots-txt
    User-agent: *
    Allow: /
    ```

5. Создайте файл `astro.config.mjs`

    Astro настраивается с помощью файла `astro.config.mjs`. Этот файл необязателен, если вам не нужно настраивать Astro, но вы можете захотеть создать его сейчас.

    Создайте `astro.config.mjs` в корне вашего проекта и скопируйте в него приведённый ниже код:

    ```js title="astro.config.mjs"
    import { defineConfig } from 'astro/config';

    // https://astro.build/config
    export default defineConfig({});
    ```

    Если вы хотите включить [компоненты фреймворка пользовательского интерфейса](/ru/guides/framework-components/), такие как React, Svelte и др. Если вы используете в своем проекте другие инструменты, такие как MDX или Partytown, здесь вы сможете [вручную импортировать и настроить нужные интеграции](/ru/guides/integrations-guide/).

    Для получения дополнительной информации читайте [справочник по конфигурации API](/ru/reference/configuration-reference/).

6. Добавьте поддержку TypeScript

    TypeScript настраивается с помощью файла `tsconfig.json`. Даже если вы не пишете код на TypeScript, этот файл важен для того, чтобы такие инструменты, как Astro и VS Code, знали, как понимать ваш проект. Некоторые функции (например, импорт пакетов npm) не полностью поддерживаются в редакторе без файла `tsconfig.json`.

    Если вы собираетесь писать код на TypeScript, рекомендуется использовать шаблон Astro `strict` или `strictest`. Посмотреть и сравнить три конфигурации шаблонов можно на сайте [astro/tsconfigs/](https://github.com/withastro/astro/blob/main/packages/astro/tsconfigs/).

    Создайте файл `tsconfig.json` в корне проекта и скопируйте в него приведённый ниже код. (Вы можете использовать `base`, `strict` или `strictest` для своего шаблона TypeScript):

    ```json title="tsconfig.json" "base"
    {
      "extends": "astro/tsconfigs/base"
    }
    ```

    Подробнее об этом читайте в [руководстве по настройке TypeScript](/ru/guides/typescript/#setup).

7. Следующие шаги

    Если вы выполнили все шаги, описанные выше, каталог вашего проекта должен выглядеть следующим образом:

    <FileTree>
    - node_modules/
    - public/
      - robots.txt
    - src/
      - pages/
        - index.astro
    - astro.config.mjs
    - package-lock.json, или `yarn.lock`, `pnpm-lock.yaml` и т. д.
    - package.json
    - tsconfig.json
    </FileTree>

8. Теперь можно [запустить сервер разработки Astro](/ru/develop-and-build/#запуск-сервера-разработки-astro) и увидеть живое превью вашего проекта во время сборки!

</Steps>
